<template>
	<view class="login">
		<u-navbar @leftClick="leftClick" :autoBack="true" :placeholder="true">
		</u-navbar>

		<view v-if="loginType" class="title">
			注册
		</view>
		<view v-else class="title">
			忘记密码
		</view>


		<view class="inputBox">

			<view class="innerBox">

				<view class="" @click="show = true">
					+{{phoneShow}}
				</view>

				<image src="../../static/image/down.png" style="width: 40rpx;height: 40rpx;margin-left: 14rpx;" mode="">
				</image>

				<view class="shu"></view>

				<image src="../../static/image/phone.png" mode="" style="width: 48rpx;height: 48rpx;"></image>

				<input type="number" class="inputitem" v-model="mobile" placeholder="请输入手机号" />

			</view>

			<view class="innerBox" style="margin-top: 40rpx;">
				<image src="../../static/image/phone.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<input type="text" class="inputitem" v-model="email" placeholder="请输入邮箱号" />
			</view>

			<view class="radioBox">
				<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px',marginRight: '16px'}"
						v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"
						@change="radioChange" activeColor="#439B05">
					</u-radio>
				</u-radio-group>
			</view>


			<view class="innerBox" style="margin-top: 10rpx;">
				<image src="../../static/image/securit.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<input type="text" class="inputitem" v-model="code" placeholder="请输入验证码" />
				<view v-if="codeFlag" class="yzm" @click="handleSendcode">
					获取验证码
				</view>
				<view v-else class="yzm">
					{{time}}s
				</view>
			</view>

			<view class="innerBox" style="margin-top: 40rpx;">
				<image src="../../static/image/word.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<input type="password" class="inputitem" v-model="password" placeholder="请输入新密码" />
			</view>

			<view class="innerBox" style="margin-top: 40rpx;">
				<image src="../../static/image/word.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<input type="password" class="inputitem" v-model="confirmpassword" placeholder="请再次输入新密码" />
			</view>


		</view>


		<view class="btnBox">
			<view class="btns" @click="handleRegister">
				注册并登录
			</view>
		</view>


		<view class="xieyiBox">
			<view class="" @click="readflag = !readflag">
				<image v-if="readflag" src="../../static/image/selected.png" style="width: 36rpx;height: 36rpx;"
					mode=""></image>
				<image v-else src="../../static/image/yuan.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
			</view>

			<view class="">
				<text>已阅读并同意</text>
				<text style="color: black;">《用户协议》</text>
				<text>和</text>
				<text style="color: black;">《隐私政策》</text>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" @cancel="show = false" @confirm="handlePhone"></u-picker>

	</view>
</template>

<script>
	import {
		register,
		sendsms,
		sendEamil
	} from "@/api/api.js"
	export default {
		data() {
			return {
				loginType: true,
				codeFlag: true,
				mobile: "",
				password: "",
				confirmpassword: "",
				code: "",
				time: 60,
				readflag: false,
				invite_code: "",
				email: "",
				columns: [
					['63', '65']
				],
				show: false,
				phoneShow: "63",
				radiovalue1: '手机号验证码',
				radiolist1: [{
						name: '手机号验证码',
						disabled: false
					},
					{
						name: '邮箱验证码',
						disabled: false
					},
				],
			}
		},
		onLoad(options) {
			if (options.falg == false) {
				this.loginType = false
			}
			if (options.invite_code) {
				uni.showModal({
					title: options.invite_code
				})
				this.invite_code = options.invite_code
			}

		},
		onShow() {

		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n, this.radiovalue1);

			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			handleLogintype() {
				this.loginType = !this.loginType
			},

			handlePhone(e) {
				this.show = false
				this.phoneShow = e.value[0]
			},


			//发送验证码
			async handleSendcode() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号！',
						icon: "none",
						duration: 2000
					});
					return
				}
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if (!reg.test(this.email)) {
					uni.showToast({
						title: '请输入正确的邮箱号！',
						icon: "none",
						duration: 2000
					});
					return
				}
				const that = this
				if (this.radiovalue1 == "手机号验证码") {
					let res = await sendsms({
						mobile: that.phoneShow + that.mobile
					})
				} else {
					let res = await sendEamil({
						email: that.email
					})
				}

				// console.log("验证码", res)
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
					that.codeFlag = false
					const interval = setInterval(function() {
						if ((that.time--) <= 0) {
							that.time = 60
							that.codeFlag = true
							clearInterval(interval)
						}
					}, 1000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}

			},
			//注册并登录			
			async handleRegister() {
				if (this.mobile == "") {
					uni.showToast({
						title: '请输入手机号！',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.email == "") {
					uni.showToast({
						title: '请输入邮箱号！',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.code == "") {
					uni.showToast({
						title: '请输入验证码！',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.password == "") {
					uni.showToast({
						title: '请输入密码！',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.confirmpassword == "") {
					uni.showToast({
						title: '请输入确认密码！',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.password != this.confirmpassword) {
					uni.showToast({
						title: '密码输入不一致',
						icon: "none",
						duration: 2000
					});
					return
				}
				if (!this.readflag) {
					uni.showToast({
						title: '请阅读并同意用户协议和隐私协议',
						icon: "none",
						duration: 2000
					});
					return
				}
				let res = await register({
					mobile: this.phoneShow + this.mobile,
					password: this.password,
					email: this.email,
					is_mobile: this.radiovalue1 == '手机号验证码' ? '1' : '2',
					code: this.code,
					invite_code: this.invite_code
				})
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
					// uni.setStorageSync('token', res.data)
					window.sessionStorage.setItem('token', res.data)
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/home/index"
						})
					}, 2000)

				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}

				console.log("333", res)
			},
			leftClick() {},
		}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100%;
		min-height: 100%;
		background-color: #ffffff;
		padding: 40rpx;
		box-sizing: border-box;

		.title {
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 700;
			color: #333333;
			line-height: 47rpx;
			margin-top: 140rpx;
			margin-left: 30rpx;
		}

		.inputBox {
			margin-top: 100rpx;

			.innerBox {
				width: 100%;
				height: 104rpx;
				background: #F5F5F5;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 28rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				position: relative;

				.inputitem {
					width: 402rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
				}

				.yzm {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #439B05;
					line-height: 33rpx;
					position: absolute;
					right: 40rpx;
				}

				.shu {
					width: 2rpx;
					height: 56rpx;
					background-color: #CCCCCC;
					margin: 0 30rpx;
				}
			}

			.radioBox {
				margin-top: 30rpx;
			}
		}

		.btnBox {
			margin-top: 100rpx;

			.btns {
				width: 630rpx;
				height: 88rpx;
				background: #439B05;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}

			.btn {
				background-color: #ffffff;
				color: #439B05;
				border: 2rpx solid #439B05;
				margin-top: 40rpx;
			}
		}

		.xieyiBox {
			display: flex;
			align-items: center;
			margin-left: 68rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 28rpx;
			margin-top: 20rpx;
		}

		.typeLogin {
			display: flex;
			align-items: center;
			margin-top: 162rpx;
			width: 100%;
			justify-content: space-between;

			.heng {
				width: 200rpx;
				height: 2rpx;
				background-color: #EEEEEE;
				font-size: 25rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 33rpx;
			}
		}


		.loginType {
			margin-top: 50rpx;

			.typeitem {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;

			}
		}

	}
</style>